@charset "utf-8";
@import "reset";

$font-size: 20px;
$color: #ff9344;
@function r($px) {
  @return $px/$font-size * 1rem;
}

.web {
  //头部
  header {
    height: r(150px);
    padding-top: r(17px);
    padding-bottom: r(9px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    .h_left {
      width: r(123px);
      height: r(123px);
      margin-left: r(23px);
      overflow: hidden;
      a {
        display: inline-block;
        img {
          width: 100%;
        }
      }
    }
    .h_center {
    }
    .h_right {
      .h_address {
        width: r(163px);
        height: r(60px);
        box-sizing: border-box;
        border: r(3px) solid $color;
        color: #000000;
        font-size: r(26px);
        margin-right: r(21px);
        margin-top: r(30px);
        position: relative;
        select {
          width: 100%;
          height: 100%;
          line-height: r(60px);
          border: none;
          padding-left: r(20px);
          background-color: transparent;
          -webkit-appearance: none;
        }
        i {
          position: absolute;
          right: r(11px);
          top: 50%;
          color: $color;
          transform: translateY(-50%);
        }
      }
    }
  }
  //内容
  main {
    width: 100%;
    position: absolute;
    float: left;
    top: r(150px);
    left: 0;
    bottom: r(136px);
    overflow-y: scroll;
  }
  //底部
  footer {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: r(17px) 0;
    .f_div {
      text-align: center;
      ul {
        li {
          width: 24%;
          display: inline-block;
          text-align: center;
          i {
            color: $color;
            font-size: r(72px);
          }
          div {
            font-size: r(26px);
            color: #000;
          }
        }
      }
    }
  }
  //公共TITLE
  .common_title_all {
  width: 100%;
  .common_title {
    width: 95%;
    height: r(97px);
    line-height: r(97px);
    margin: 0 auto;
    overflow: hidden;
    .ct_left {
      display: inline-block;
    }
    i {
      display: inline-block;
      vertical-align: middle;
      font-size: r(50px);
      color: $color;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: r(30px);
    }
    .more {
      span {
        font-size: r(24px);
      }
      i {
        font-size: r(25px);
      }
    }
  }
}
  //二级菜单
  .common_second_all {
    width: 100%;
    .common_second {
      width: 95%;
      height: r(97px);
      line-height: r(97px);
      margin: 0 auto;
      overflow: hidden;
      .ct_left {
        display: inline-block;
        .ct_left_img {
          display: inline-block;
          width:r(56px);
          height:r(73px);
          overflow: hidden;
          vertical-align: middle;
          img {
            width:100%;
          }
        }
      }
      i {
        display: inline-block;
        vertical-align: middle;
        font-size: r(50px);
        color: $color;
      }
      span {
        display: inline-block;
        vertical-align: middle;
        font-size: r(30px);
      }
      .more {
        span {
          font-size: r(24px);
        }
        i {
          font-size: r(25px);
        }
      }
    }
  }
  //返回按钮
  .back{
    margin-top: r(25px);
    margin-left:r(35px);
    border:r(3px) solid $color;
    border-radius: 50px;
    padding:r(15px) r(32px);
    span {
      color: #000000;
      font-size: r(26px);
      text-transform:capitalize;
    }
  }
//  搜索框
    .search {
      width: r(255px);
      height: r(55px);
      border-radius: 50px;
      box-sizing: border-box;
      border: r(4px) solid $color;
      display: inline-block;
      margin: r(34px) auto r(55px) auto;
      padding-left: r(20px);
      padding-right: r(15px);
      position: relative;
      input[type="text"] {
        border: none;
        width: r(170px);
        height: 100%;
        vertical-align: middle;
        padding: 0 7px;
        position: relative;
        &::placeholder {
          font-size: r(24px);
          color: #777777;
        }
      }
      i {
        display: inline-block;
        vertical-align: middle;
        color: $color;
      }
    }
  //轮播图
  .banner {
    width: 100%;
    height: r(287px);
    overflow: hidden;
    img {
      display: block;
      width: 100%;
      transform: translateY(-20%);
    }
  }
  //公共按钮
  .common_button {
    display: inline-block;
    font-size: r(30px);
    color: #ffffff;
    background-color: $color;
    width:r(118px);
    height:r(58px);
    line-height:r(58px);
    border-radius:10px;
    text-align: center;
  }
}